// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

@keyframes slide-left {
    from {
        transform: translate(-50%);
    }

    to {
        transform: translate(0);
    }
}

@keyframes slide-right {
    from {
        transform: translate(50%);
    }

    to {
        transform: translate(0);
    }
}

.c-pro-tip {
    background-color: f3.$black;
    font-weight: bold;
    overflow-x: hidden;

    .mzp-l-content {
        padding-top: $spacing-md;
        padding-bottom: $spacing-md;
    }

    h2 {
        @include text-title-2xs;
        background-color: f3.$green-primary;
        border-radius: 20px;
        display: inline-block;
        margin-bottom: $spacing-md;
        padding: $spacing-sm $spacing-md;
        text-transform: lowercase;
    }

    p {
        @include font-size(16px);
        @include f3.border(f3.$violet-dark);
        border-radius: 45px;
        color: f3.$white;
        padding: $spacing-md;
        text-align: center;

        @media #{$mq-md} {
            @include text-title-2xs;
            padding-right: $spacing-lg;
            padding-left: $spacing-lg;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        h2 {
            transform: translateX(-50%);
        }

        p {
            transform: translateX(50%);
        }

        h2.animate-pop-in {
            animation-name: slide-left;
            animation-fill-mode: forwards;
        }

        p.animate-pop-in {
            animation-name: slide-right;
            animation-fill-mode: forwards;
        }
    }
}

@supports (display: grid) {
    $overlap: $spacing-md;

    .c-pro-tip {
        @media #{$mq-md} {
            .mzp-l-content {
                display: grid;
                grid-template-columns: auto $overlap 1fr;
            }

            h2 {
                align-self: center;
                grid-column: 1 / 3;
                grid-row: 1 / -1;
                margin-bottom: 0;
                z-index: 1;
            }

            p {
                grid-column: 2 / 4;
                grid-row: 1 / -1;
            }
        }
    }
}
